<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="备份位置" prop="backupLocation">
        <el-select v-model="form.backupLocation" placeholder="请选择备份位置" style="width: 100%">
          <el-option
            v-for="item in locationOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备份方式" prop="backupMethod">
        <el-select v-model="form.backupMethod" placeholder="请选择备份方式" style="width: 100%">
          <el-option
            v-for="item in methodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="远程服务器" prop="serverId" v-if="form.backupLocation === '1'">
        <el-select v-model="form.serverId" placeholder="请选择远程服务器" style="width: 100%">
          <el-option
            v-for="server in serverOptions"
            :key="server.serverId"
            :label="server.serverName"
            :value="server.serverId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { backupDatabase } from "@/api/system/dbmanagement";
import { listAllServers } from "@/api/system/server"; // 假设有获取服务器列表的API

export default {
  name: "BackupDialog",
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: "数据库备份"
    }
  },
  data() {
    return {
      // 是否显示弹窗
      visible: false,
      // 表单参数
      form: {
        dbId: null,
        backupLocation: "0",
        backupMethod: "0",
        serverId: null,
        serverName: null,
        remark: ""
      },
      // 表单校验
      rules: {
        backupLocation: [
          { required: true, message: "备份位置不能为空", trigger: "blur" }
        ],
        backupMethod: [
          { required: true, message: "备份方式不能为空", trigger: "blur" }
        ],
        serverId: [
          { required: true, message: "远程服务器不能为空", trigger: "blur" }
        ]
      },
      // 备份位置选项
      locationOptions: [
        { value: "0", label: "本地" },
        { value: "1", label: "远程服务器" }
      ],
      // 备份方式选项
      methodOptions: [
        { value: "0", label: "命令行备份" },
        { value: "1", label: "JDBC备份" }
      ],
      // 远程服务器选项
      serverOptions: []
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        dbId: null,
        backupLocation: "0",
        backupMethod: "0",
        serverId: null,
        serverName: null,
        remark: ""
      };
      this.resetForm("form");
    },
    // 打开弹窗
    open(dbId) {
      this.reset();
      this.form.dbId = dbId;
      this.visible = true;
      this.getServerList();
    },
    // 获取服务器列表
    getServerList() {
      listAllServers().then(response => {
        this.serverOptions = response.data || [];
      });
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 如果选择远程服务器，设置服务器名称
          if (this.form.backupLocation === "1" && this.form.serverId) {
            const server = this.serverOptions.find(
              s => s.serverId === this.form.serverId
            );
            if (server) {
              this.form.serverName = server.serverName;
            }
          }
          
          // 设置表单参数
          const params = {
            dbId: this.form.dbId,
            params: {
              backupLocation: this.form.backupLocation,
              backupMethod: this.form.backupMethod
            },
            serverId: this.form.serverId,
            serverName: this.form.serverName,
            remark: this.form.remark
          };
          
          // 执行备份操作
          backupDatabase(params).then(response => {
            this.$modal.msgSuccess("数据库备份成功");
            this.visible = false;
            this.$emit("success");
          });
        }
      });
    }
  }
};
</script> 